<template>
	<view class="con">
		<view class="list" v-for="(item, index) in list" :key="index" :class="item.status == 2 ? 'hidden' : ''">
			<view class="list_title" @click="listclick(index, item.status)">
				{{ item.t }}
				<image class="list_title_img" src="/static/8.png" mode="" v-if="item.status == 2"></image>
				<image class="list_title_img img2" src="/static/8.png" mode="" v-else></image>
			</view>
			<view class="list_box">
				<view class="list_box_nr" v-for="(ttem, idx) in item.child" :key="idx">
					<view class="list_box_nr_title">
						<view class="list_box_nr_title_left">
							{{ttem.title}}
							<span class="span1" v-if="ttem.status == 1">审核中</span>
							<span class="span2" v-if="ttem.status == 2">提现成功</span>
							<span class="span3" v-if="ttem.status == 3">提现失败</span>
						</view>
						<view class="list_box_nr_title_right">- {{ ttem.price }}</view>
					</view>
					<view class="list_box_nr_text">{{ttem.create_times}}</view>
					<view class="list_box_nr_btn" v-if="ttem.status == 3">驳回原因：{{ttem.liyou}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let page = ref(1)
	let listtype = ref(true)
	let list = ref()

	const listclick = (index, type) => {
		list.value[index].status = type == 1 ? 2 : 1
	}

	const indexlist = async () => {
		await http.post('/srapi/keyuan/txrecord', { page: page.value }).then((res) => {
			// 返回值
			console.log('列表', res)
			list.value = res.data
		})
	}

	onLoad((option) => {
		console.log('接收传参:', option)
		indexlist()
	})
</script>

<style lang="less" scoped>
	.con {
		padding: 20rpx;
	}
	.list {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 18rpx;
		padding-bottom: 0;

		.list_title {
			font-size: 20rpx;
			font-weight: 500;
			color: #787878;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 10rpx;
			.list_title_img {
				width: 15rpx;
				height: 15rpx;
				margin-left: 10rpx;
			}
			.img2 {
				transform: rotate(180deg);
			}
		}

		.list_box {
			.list_box_nr {
				padding: 30rpx 0;
				border-bottom: 1px solid #f5f6fa;
				.list_box_nr_title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15rpx;
					.list_box_nr_title_left {
						font-size: 24rpx;
						font-weight: 500;
						color: #000000;
						.span1 {
							font-size: 20rpx;
							font-weight: 500;
							color: #ffae00;
							margin-left: 24rpx;
						}

						.span2 {
							font-size: 20rpx;
							font-weight: 500;
							color: #55ba80;
							margin-left: 24rpx;
						}
						.span3 {
							font-size: 20rpx;
							font-weight: 500;
							color: #fe2d2d;
							margin-left: 24rpx;
						}
					}
					.list_box_nr_title_right {
						font-size: 28rpx;
						font-weight: 500;
						color: #010101;
					}
				}
				.list_box_nr_text {
					font-size: 20rpx;
					font-weight: 500;
					color: #787878;
				}
				.list_box_nr_btn {
					margin-top: 20rpx;
					background: #eeeff2;
					border-radius: 12rpx;
					padding: 20rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #fe2d2d;
					line-height: 40rpx;
				}
			}
		}
	}
	.hidden {
		overflow: hidden;
		height: 60rpx;
	}

	//
</style>
